<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" rel="stylesheet">
.image{
		float:left;
	}
	
	.related{
	height:400px;
	clear:left;
	}
</style>
<?php
require("libraries/products.php");
	if(isset($_GET['pid'])){
		$id = $_GET['pid'];
		$p = new product();
		if($p->checkId($id) == true){
			$product = $p->getProductById($id);
			$related = $p->productRelated($id,$product['brand_id']);
			$product_image = $p->getImageById($id);
			$related_image = $p->getImageByIdRelated($id,$product['brand_id']);
		//debug($product_image);
		}
		else{
			//header("location:".baseurl."?page=abc");
			exit();
			}
	}
?>
<div class="breadcrumb">Trang chủ >> Nokia >> Nokia 1200</div>
<div class="imagedetail" align='center'>
<div class="slider">
    <?php
		$i = 0;
		foreach($product_image as $img){ 
			
			if($i <= 3){
				if($i == 0) echo "<input type='radio' name='slide_switch' value='$i' id='id$i' checked='checked' />";
				else echo "<input type='radio' name='slide_switch' value='$i' id='id$i'/>";
				echo	"<label for='id$i' id='label$i' class='sliderlabel'>
						 <img id='img$i' src='images/product/$img[image_name]' width='60' height='45'/>
						 </label>
						 <img alt='img not found' width ='300px' height='300px' src='images/product/$img[image_name]'/>";
			}
			else{	
					echo 	"<input type='radio' name='slide_switch' value='$i' id='id$i'/>";
					echo	"<label for='id$i' id='label$i' class='sliderlabel' style='display:none'>
								<img id='img$i' src='images/product/$img[image_name]' width='60' height='45'/>
							</label>
							<img alt='img not found' width ='300px' height='300px' src='images/product/$img[image_name]'/>";
					};
			$i = $i + 1;
		
		}
		if(count($product_image) > 4){
			echo	"<label id='previmg' for=".count($product_image).">
						<img src='images/slide/galeryprev.png' width='15' height='45' />
					 </label>	
					";
			echo	"<label id='nextimg'>
						<img src='images/slide/galerynext.png' width='15' height='45' />
					 </label>	
					";
			}
	
	echo "</div>";
	echo "<div style='clear:left'></div>"
	?>
    </div>
    
<?php echo "<br/>Tên sản phẩm:   ".$product['pro_name']."<br>" ?>
<?php echo "Thông tin sản phẩm:   ".$product['pro_info']."<br>" ?>
<?php echo "Số lượng còn lại:   ".$product['pro_quantity']."<br>" ?>
<?php echo "Tình trạng sản phẩm:   ".$product['status']."<br>" ?>
</div>
<div class="c_ftitle">
    <span class="noibat">
    <a href="#" style="text-decoration:none; color:#FFF">Sản phẩm cùng hãng</a>
    </span>
</div>

<div class="related">
<?php foreach ($related_image as $items) {?>
<?php echo "<img src='images/product/$items[image_name]' />"; ?>
<?php }?>
</div>

<script type="application/javascript">
$(document).ready(function() {

	var target;
	$(".sliderlabel").click(function(){
		$(".slider").children(".sliderlabel").css("border","none")
		$(".slider").children(".sliderlabel").css("opacity","0.6");
		$(this).css("border","1px solid #F00");
		$(this).css("opacity","1");
		target = $(this).index();
		});
	
	
	var t = $("#previmg").attr("for");
	var img = new Array();
	for( var j = 0; j < t; j++){
		img[j] = $("#img" + j).attr("src");
		}
	var i = 0;
	$("#nextimg").click(function(){
		
		$(".slider").children(".sliderlabel").css("border","none")
		$(".slider").children(".sliderlabel").css("opacity","0.6");
		target = (target - 3);
		if(target<0) target = target + t*3;
		$(".slider").children().eq(target).css("border","1px solid #F00");
		$(".slider").children().eq(target).css("opacity","1");
		
		$("#label0 img").fadeOut(1).attr("src",img[(i + 1)%t]).fadeIn(1);
		$("#label1 img").fadeOut(1).attr("src",img[(i + 2)%t]).fadeIn(1);
		$("#label2 img").fadeOut(1).attr("src",img[(i + 3)%t]).fadeIn(1);
		$("#label3 img").fadeOut(1).attr("src",img[(i + 4)%t]).fadeIn(1);
		
		$("#label" + 0).attr("for","id" + (i+1)%t);
		$("#label" + 1).attr("for","id" + (i+2)%t);
		$("#label" + 2).attr("for","id" + (i+3)%t);
		$("#label" + 3).attr("for","id" + (i+4)%t);
		i = i + 1;
		if(i > 4) i = i - 5;
		});
		
		$("#previmg").click(function(){
		
		$(".slider").children(".sliderlabel").css("border","none")
		$(".slider").children(".sliderlabel").css("opacity","0.6");
		target = (target + 3);
		if(target>13) target = target - t*3;
		$(".slider").children().eq(target).css("border","1px solid #F00");
		$(".slider").children().eq(target).css("opacity","1");
		
		$("#label0 img").fadeOut(1).attr("src",img[(i + 4)%t]).fadeIn("fast");
		$("#label1 img").fadeOut(1).attr("src",img[i%t]).fadeIn("fast");
		$("#label2 img").fadeOut(1).attr("src",img[(i + 1)%t]).fadeIn("fast");
		$("#label3 img").fadeOut(1).attr("src",img[(i + 2)%t]).fadeIn("fast");
		
		$("#label" + 0).attr("for","id" + (i + 4)%t);
		$("#label" + 1).attr("for","id" + (i)%t);
		$("#label" + 2).attr("for","id" + (i + 1)%t);
		$("#label" + 3).attr("for","id" + (i + 2)%t);
		
		i = i - 1;
		if(i < 0) i = i + 5;
		});
		
	});
</script>